<template>
  <div class="header-wrapper">
    <h2>后台管理系统</h2>
    <i class="el-icon-menu header-icon" @click="collapseFn"></i>
    <el-dropdown class="header-dropdown" @command="handleDropdown" trigger="click">    
      <div class="style-hover">
        <!--  -->
       <el-image class="header" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-image>
      <span class="el-dropdown-link">
        供应商 / 用户名称
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="logout">注销</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import bus from "./bus";
export default {
  data() {
    return {
      collapse: false,
    };
  },
  methods: {
    handleDropdown(command) {
      console.log(command);
      if (command === "logout") {
        window.localStorage.clear()
        this.$router.push("/login")
      }
    },
    collapseFn() {
      this.collapse = !this.collapse;
      bus.$emit("collapse", this.collapse);
    },
  },
};
</script>

<style lang="less">
.header-wrapper {
  height: 70px;
  line-height: 70px;
  background-color: #409eff;
  color: #fff;
  h2 {
    float: left;
    padding-left: 20px;
    font-size: 24px;
  }
  .header-icon {
    float: left;
    margin-left: 16px;
    margin-top: 2px;
    font-size: 24px;
    line-height: 70px;
  }
  .header-icon:hover{
    cursor: pointer;
  }
  .header-dropdown {
    float: right;
    margin-right: 20px;
    color: #fff;
    width: 40%;
    position: relative;
    text-align: end;
    .style-hover:hover {
      cursor: pointer;
    }
    .style-hover {
      float: right;
    .header {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid black;
      position: absolute;
      top: 15px;
      right: 145px;
      span {
        float: right;
      }
    }
    }
  }
}
</style>